<template>
  <div>
    <basic-container>
      <el-button @click="visible = true">查看详情</el-button>
      <el-dialog :visible.sync="visible" width="80%">
        <el-row type="flex" justify="space-around">
          <el-col :span="11">
            <el-card>
              <div slot="header">
                <i class="el-icon-setting"></i>
                报文头配置
              </div>
              <menu-tree :data="data" ref="treemenu" :option="option" />
            </el-card>
          </el-col>
          <el-col :span="11">
            <el-card>
              <div slot="header">
                <i class="el-icon-box"></i>
                报文头节点信息
              </div>
              <el-form label-width="80px">
                <el-form-item v-for="(item, index) in formList" :key="index" :label="item.label">
                  <el-input v-if="item.type === 'input'"></el-input>
                  <el-select v-else-if="item.type === 'select'"></el-select>
                </el-form-item>
              </el-form>
            </el-card>
          </el-col>
        </el-row>
      </el-dialog>
    </basic-container>
  </div>
</template>
<script>
import MenuTree from '@/components/menu-tree/main'
export default {
  components: {
    MenuTree
  },
  data() {
    return {
      visible: false,
      data: [],
      option: {},
      formList: [
        {
          label: 'test',
          type: 'input'
        }
      ]
    }
  },
  methods: {}
}
</script>
